<template>
	<view class="contain" :style="'margin:0 auto; width:'+winWidth+'px;'">
		<view class="kjzq">
			
			<view>
				<image 
				src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/kaojizhuanqu/kj01.jpg" 
				mode="widthFix" 
				:show-menu-by-longpress="true"
				@click="preViewImage('https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/kaojizhuanqu/kj01.jpg')"
				@longpress="handleLongPress('https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/kaojizhuanqu/kj01.jpg')">
				</image>				
			</view>

			<view class="flex justify-between flex-row pl-3 pr-3">
				<view>
					<image
					src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/kaojizhuanqu/kj022.jpg" 
					mode="widthFix" 
					:show-menu-by-longpress="true"
					style="width:350rpx"
					@click="preViewImage('https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/kaojizhuanqu/kj022.jpg')"
					@longpress="handleLongPress('https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/kaojizhuanqu/kj022.jpg')">
					</image>					
				</view>
				<view>
					<image
					src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/kaojizhuanqu/kj03.jpg" 
					mode="widthFix" 
					:show-menu-by-longpress="true"
					style="width:350rpx"
					@click="preViewImage('https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/kaojizhuanqu/kj03.jpg')"
					@longpress="handleLongPress('https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/kaojizhuanqu/kj03.jpg')">
					</image>						
				</view>
			</view>

			
			
		</view>
	</view>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import {  onLoad,onShow } from '@dcloudio/uni-app'

let winWidth=ref(uni.$tools.GetScreenWidth());

onLoad(()=>{
	//preViewImage('https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/kaojizhuanqu/kj01.jpg');
	uni.showModal({
		title:"温馨提示",
		content:"点击图片可放大查看",
		showCancel:false,
		confirmText:"我知道了",
		success:res=>{
			if(res.confirm){
				//preViewImage('https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/kaojizhuanqu/kj01.jpg');
			}
		}
	})
});


//预览大图
const preViewImage=(e:any)=>{
	uni.previewImage({
		urls:[e],
		current:e
	})	
}

//长按识别二维码
const handleLongPress = (e:any) => {
	uni.previewImage({
		urls:[e],
		longPressActions: {
			itemList:[],
			success: (res) =>{
				console.log(res);
				// 触发长按事件后，调用uni.scanCode方法开始扫码
				uni.scanCode({
					  success: (res) => {
						console.log(res);
					  },
					  fail: (res) => {
						uni.showToast({
						  title: '扫描失败',
						  icon: 'none'
						})
						console.log(res);
					  }
				 })
			},
			fail: (res)=> {
				console.log(res.errMsg);
			}
		}
	})
}
</script>

<style lang='scss' scoped>
	@import "kaojizhuanqu.scss";
</style>